<template>
  <div class="payment">
    <div class="payment-con">
      <svg-icon class="icon" icon-class="success" />
      <div class="txt">支付成功</div>
    </div>
    <div class="btns">
      <div class="btn" @click="backToPage">返回首页</div>
    </div>
  </div>

</template>

<script>
export default {
  name: 'PaymentStatus',
  methods: {
    backToPage() {
      this.$router.push({
        name: 'dashboard'
      })
    }
  }
}
</script>

<style scoped lang="scss">
  @import "src/styles/mixin.scss";
  .payment{
    &-con{
      padding-top: 35%;
      text-align: center;
      .icon{
        font-size: pxCalc(65px);
        color: rgb(135,187,81);
      }
      .txt{
        font-size: pxCalc(16px);
        margin-top: pxCalc(20px);
      }
    }
    .btns{
      width: 90%;
      margin: pxCalc(60px) auto 0;
      .btn{
        width: 100%;
        cursor: pointer;
        border: pxCalc(1px) solid #ff7340;
        line-height: pxCalc(35px);
        display: inline-block;
        font-size: pxCalc(14px);
        color: #fff;
        text-align: center;
        border-radius: pxCalc(5px);
        background: #ff7340;
        margin-top: pxCalc(200px);
        box-shadow: 0px pxCalc(4px) pxCalc(5px) rgba(255, 115, 64, 0.22);
      }
    }
  }
</style>
